<template>
    <div>
        <el-dialog :fullscreen="isScreen"  v-dialogdrag=" { target:'.el-dialog__header',container:'.el-dialog',border:'.el-dialog__wrapper'}" v-dialogDragWidth="{container:'.el-dialog'}":close-on-click-modal="false" :visible.sync="showDialog"
                   :before-close="handleClose">
                <div slot="title" class="model-title">
                        原料管理
                        <span class="title-left-icon">
                            <i class="icon icon-quanping" @click="isScreen=isScreen?false:true"></i>
                        </span>
                </div>
                <el-form :model="modelForm" ref="modelForm" label-width="100px" class="model-from demo-ruleForm" style="width:96%;height:200px;overflow-y:auto">
                    <el-form-item label=""  :rules="[]" class="el-form-item__content_margin">
                        <div class="el-input el-input-group el-input-group--prepend">
                            <div class="el-input-group__prepend">所属类别</div>
                            <el-cascader
                                class="w-100p"
                                :props="categorySelect"
                                :options="treeData"
                                :disabled="true"
                                v-model="downCategeryId"
                                @change="getValue">
                            </el-cascader>
                        </div>
                    </el-form-item>
                    
                    <el-form-item label=" " prop="no" :inline="true"
                                :rules="[{ required: true, message: '原料编码不能为空且不能重复', trigger: 'blur' }]"
                                class="el-form-item__content_margin">
                        <el-input placeholder="请输入原料编码" v-model="modelForm.no" :maxlength="12">
                            <template slot="prepend">
                                <el-tooltip placement="top" content="请填写原料编码，不能填写已有编码">
                                    <el-button tabIndex="-1">原料编码</el-button>
                                </el-tooltip>
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label=" " prop="name" :rules="[{ required: true, message: '原料名称不能为空且不能重复', trigger: 'blur' }]"
                                class="el-form-item__content_margin">
                        <el-input placeholder="请输入原料名称" v-model="modelForm.name" :maxlength="11">
                            <template slot="prepend">
                                <el-tooltip placement="top" content="请填写原料名称，不能填写已有名称">
                                    <el-button tabIndex="-1">原料名称</el-button>
                                </el-tooltip>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="model-footer">
                    <el-button type="primary" @click="submitForm('modelForm')">提交</el-button>
                    <el-button @click="resetForm('modelForm')">取消</el-button>
                </div>
        </el-dialog>
    </div>
</template>
<script>
    //注意路径
    export default {
        props: ['isShow', 'id','isUpdate','perentId'],  //参数
        data() {
            return {
                isScreen:false,
                treeData: [],
                downCategeryId:[],
                categorySelect:{
                   label:"name",
                   value:"id"
                },
                modelForm:{},
                showDialog: false,
                activityId: "",
                isSave: true,
            };
        },
        watch: {
            isShow: function (newValue, oldValue) {
                this.modelForm={};
                this.showDialog = newValue;
                this.downCategeryId=[];
                if (this.showDialog) {
                    if (this.id != '') {
                        this.activityId = this.id;
                        this.isSave = false;
                        
                        this.$axios.get("materialCategorys/" + this.activityId + "/update").then(data=> {
                            var dataValue = data.content;
                            var ids ="";
                            this.downCategeryId=this.perentId;
                            // if(!this.isUpdate){
                            //     ids = (dataValue.materialCategory.parentIds+dataValue.materialCategory.id).replace("0/", "");
                            // }else{
                            //     ids = (dataValue.materialCategory.parentIds).replace("0/", "");
                            // }
                            // if(ids==""){
                            //     ids="0/"
                            // }
                            // this.downCategeryId = ids.split("/");
                            // this.downCategeryId=this.downCategeryId.map(s => +s);
                            var tree = dataValue.treeData;
                            this.newLabel(tree);
                            this.treeData = tree;
                            if(this.isUpdate){
                                this.modelForm = dataValue.materialCategory;
                            }
                        });
                    } else {
                        this.isSave = true;
                        this.$axios.get("materialCategorys/create").then(data=>{
                            var dataValue = data.content;
                            this.modelForm = dataValue.materialCategory;
                            var tree = dataValue.treeData;
                            this.newLabel(tree);
                            this.treeData = [tree[0]];
                            this.downCategeryId=[tree[0].id];
                        });
                    }
                }
            }
        },
        created() {
            window.this = this;
        },
        methods: {
            getValue(value){
                console.log(value);
            },
            newLabel(newList) {
                if (newList) {
                    for (var i = 0; i < newList.length; i++) {
                        newList[i].label = newList[i].name;
                        newList[i].value = newList[i].id + "";
                        if (!newList[i].children || newList[i].children.length == 0) {
                            newList[i].children = null;
                        } else {
                            for (var s = 0; s < newList[i].children.length; s++) {
                                newList[i].children[s].label = newList[i].children[s].name;
                                newList[i].children[s].value = newList[i].children[s].id + "";
                                newList[i].children[s].children = null;
                            }
                        }
                    }
                }
            },
            submitForm(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var data = this.modelForm;
                        this.modelForm.parentId = this.downCategeryId[this.downCategeryId.length - 1];

                        // this.modelForm.category=this.downCategeryId.join("/");
                        // this.modelForm.category=this.downCategeryId
                        if (!this.modelForm.parentId) {
                            this.modelForm.category = 0;
                        }
                        if(this.modelForm.parentId===0){
                                this.modelForm.parentIds="0/";
                        }else{
                            this.modelForm.parentIds="0/"+this.modelForm.parentId+"/";
                        }
                        if (!this.isUpdate) {
                            this.$axios.post("materialCategorys/create", data,"").then(data=> {
                                if (data.status == 200) {
                                    this.$message({
                                        message: data.message,
                                        type: 'success'
                                    });
                                    this.$emit('addSuccess');
                                } else {
                                    this.$message.error(data.message);
                                }
                            })
                        } else {
                            this.modelForm._method = "PUT";
                            this.$axios.put("materialCategorys/" + this.activityId + "/update", data).then(data=> {
                                if (data.status == 200) {
                                    this.$message({
                                        message: data.message,
                                        type: 'success'
                                    });
                                    this.$emit('addSuccess');
                                } else {
                                    this.$message.error(data.message);
                                }
                            });
                        }
                    }
                });
            },
            resetForm(formName) {
                this.$refs["modelForm"].resetFields();
                this.$emit('close');
                this.showDialog = false;
            },
            handleClose(done) {
                this.$refs["modelForm"].resetFields();
                this.$emit('close');
                done();
            }
        }
    }
</script>
<style scoped>
    .cggg-con{
        background-color: #F9F9F9;
        border: 1px solid #cccccc;
        border-top: 3px solid #1ab394;
        margin:0 10px 10px 100px;
        padding: 5px 15px 15px 15px;
    }
</style>